<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text" v-model="inputValue">
      <!--
        编程式导航 - 路由传参
          问题:点击搜索按钮，跳转需要传参如何实现?
          两种传参方式:
            查询参数
            动态路由传参
          两种跳转方式，对于两种传参方式都支持:
            (1)path 路径跳转传参(query传参)
              传参
                this.$router.push(path:'/路径?参数名1=参数值1&参数2=参数值2')
                this.$router.push({
                  path: '/路径',
                  query:{
                    参数名1:参数值1
                    参数名2: 参数值2
                  }
                })
              接收
                $route.query.参数名 
              
            (2)path 路径跳转传参(动态路由传参)
              传参
                this.$router.push('/路径/参数值')
                this.$router.push({
                  path: '/路径/参数值',
                  }
                })
              接收
                $route.params.参数名   

            (2)path 命名路由跳转传参


       -->
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic',
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    goSearch() {
      // 1. 通过路径的方式跳转
      // (1) this.$router.push('路由路径') [简写]
      //     this.$router.push('路由路径?参数名=参数值')
      // this.$router.push('/search')
      // this.$router.push(`/search?key=${this.inpValue}`)
      this.$router.push(`/search/${this.inputValue}`)

      // (2) this.$router.push({     [完整写法] 更适合传参
      //         path: '路由路径'
      //         query: {
      //            参数名: 参数值,
      //            参数名: 参数值
      //         }
      //     })
      //方法1
      // this.$router.push({
      //   path: '/search',
      //   query: {
      //     key: this.inpValue
      //   }
      // })
      //方法2
      // this.$router.push({
      //   path: `/search/${this.inpValue}`
      // })
      //接收解析  $router.query.key


      // 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径
      //    this.$router.push({
      //        name: '路由名'
      //        query: { 参数名: 参数值 },
      //        params: { 参数名: 参数值 }
      //    })
      /*
      this.$router.push({
        name: 'search',
        // query: {
        //   key: this.inpValue
        // }
        params: {
          words: this.inputValue
        }
      })*/
      //接收解析  $router.params.key
      //this.$router.push(`/search?key=${this.inputValue}`)
    }
  }
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}

.search-box {
  display: flex;
  justify-content: center;
}

.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.search-box input:focus {
  border: 2px solid #ad2a26;
}

.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}

.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}

.hot-link a {
  margin: 0 5px;
}
</style>